<template>
  <div class="container">
    <header>
      <h1>智能驾驶舱</h1>
    </header>

    <!-- 左边 -->
    <div class="layout-grid">
      <div class="card card-left">
        <h2>任务信息</h2>
        <h3>任务状态统计</h3>

        <div class="stats-image">
          <img
            src="@/views/image/image1.png"
            alt="任务统计图片"
            class="task-image"
          />
        </div>

        <div class="divider"></div>

        <h3>任务执行详情</h3>

        <div class="stats-image stats-image-full">
            <img src="@/views/image/image2.png" 
                alt="任务执行详情"
                class="task-image larger-task-image-left"/>
        </div>
      </div>

      <!-- 中间上面 -->
      <div class="card card-middle-top">
        <h2>站内资源详情</h2>
        <!-- 表格滚动容器 -->
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                    <th>序号</th>
                    <th>工站</th>
                    <th>资源位置</th>
                    <th>物理详情</th>
                    <th>型号</th>
                    <th>编码</th>
                    <th>分类范围</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>1</td>
                    <td>合成工业</td>
                    <td>B1-1</td>
                    <td>O1，粉末A，25mg；O2，粉末B，50mg</td>
                    <td><span class="badge badge-powder">粉末型</span></td>
                    <td>DNP501.152</td>
                    <td>2</td>
                    </tr>
                    <tr>
                    <td>2</td>
                    <td>合成工业</td>
                    <td>B1-2</td>
                    <td>O1，粉末B，8mg；O2，粉末C，100mg</td>
                    <td><span class="badge badge-powder">粉末型</span></td>
                    <td>DNP501.153</td>
                    <td>2</td>
                    </tr>
                    <tr>
                    <td>3</td>
                    <td>合成工业</td>
                    <td>C1-1</td>
                    <td>O1，粉末A，25mg；O2，粉末C，100mg</td>
                    <td><span class="badge badge-powder">粉末型</span></td>
                    <td>DNP501.154</td>
                    <td>2</td>
                    </tr>
                    <tr>
                    <td>4</td>
                    <td>合成工业</td>
                    <td>W1-1</td>
                    <td>O1，粉末A，50mg</td>
                    <td><span class="badge badge-powder">粉末型</span></td>
                    <td>DNP501.155</td>
                    <td>1</td>
                    </tr>
                    <tr>
                    <td>5</td>
                    <td>合成工业</td>
                    <td>T-1</td>
                    <td>O1，粉末A，40mg</td>
                    <td><span class="badge badge-powder">粉末型</span></td>
                    <td>DNP501.156</td>
                    <td>1</td>
                    </tr>
                    <tr>
                    <td>6</td>
                    <td>合成工业</td>
                    <td>SC-1</td>
                    <td>O1，粉末A，50mg</td>
                    <td><span class="badge badge-powder">粉末型</span></td>
                    <td>DNP501.157</td>
                    <td>1</td>
                    </tr>
                    <tr>
                    <td>7</td>
                    <td>合成工业</td>
                    <td>RC-1</td>
                    <td>O1，粉末A，25mg</td>
                    <td><span class="badge badge-powder">粉末型</span></td>
                    <td>DNP501.158</td>
                    <td>2</td>
                    </tr>
                    <tr>
                    <td>8</td>
                    <td>智能感知</td>
                    <td>XT-2</td>
                    <td>O1，水溶液，5mL；O2，粉末A，20mg</td>
                    <td><span class="badge badge-liquid">液体型</span></td>
                    <td>TT10TC.159</td>
                    <td>1</td>
                    </tr>
                    <tr>
                    <td>9</td>
                    <td>智能感知</td>
                    <td>RC-1</td>
                    <td>O1，粉末A，25mg</td>
                    <td><span class="badge badge-water">水溶</span></td>
                    <td>TT10TC.160</td>
                    <td>2</td>
                    </tr>
                    <tr>
                    <td>10</td>
                    <td>合成工业</td>
                    <td>XT-2</td>
                    <td>O1，粉末A，25mg</td>
                    <td><span class="badge badge-powder">粉末型</span></td>
                    <td>DNP501.141</td>
                    <td>1</td>
                    </tr>
                </tbody>
            </table>
        </div>
      </div>

      <!-- 中间下面 -->
      <div class="card card-middle-bottom">
        <h2>缺料列表</h2>
        <div class="table-scroll">
            <table>
                <thead>
                    <tr>
                    <th>序号</th>
                    <th>联手类型</th>
                    <th>需求数量</th>
                    <th>场内总量</th>
                    <th>关键工站</th>
                    <th>关键任务</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                    <td>1</td>
                    <td>粉末筒（二氧化钛）</td>
                    <td>20</td>
                    <td>0</td>
                    <td>合成工站</td>
                    <td>250410-实验研究A组</td>
                    </tr>
                    <tr>
                    <td>2</td>
                    <td>粉末筒（碳酸钙）</td>
                    <td>10</td>
                    <td>1</td>
                    <td>合成工站</td>
                    <td>250410-实验研究B组</td>
                    </tr>
                    <tr>
                    <td>3</td>
                    <td>吸头盒</td>
                    <td>16</td>
                    <td>2</td>
                    <td>智能货架</td>
                    <td>250410-实验研究C组</td>
                    </tr>
                    <tr>
                    <td>4</td>
                    <td>试管</td>
                    <td>4</td>
                    <td>0</td>
                    <td>智能货架</td>
                    <td>250410-实验研究D组</td>
                    </tr>
                    <tr>
                    <td>5</td>
                    <td>溶剂瓶（水）</td>
                    <td>8</td>
                    <td>2</td>
                    <td>智能货架</td>
                    <td>250410-实验研究E组</td>
                    </tr>
                    <tr>
                    <td>6</td>
                    <td>试管</td>
                    <td>12</td>
                    <td>4</td>
                    <td>智能货架</td>
                    <td>250410-实验研究F组</td>
                    </tr>
                </tbody>
                </table>
        </div>
      </div>

      <!-- 右边上面 -->
      <div class="card card-right-top">
        <h2>样品信息统计</h2>
        <div class="stats-image">
          <img
            src="@/views/image/image3.png"
            alt="样品信息统计图片"
            class="task-image larger-task-image"
          />
        </div>
      </div>

      <!-- 右边下面 -->
      <div class="card card-right-bottom">
        <h2>工站信息统计</h2>
        <div class="stats-image">
          <img
            src="@/views/image/image4.png"
            alt="工站信息统计图片"
            class="task-image larger-task-image"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
}

body {
  background-color: #0f172a;
  color: #e2e8f0;
  line-height: 1.5;
  padding: 10px;
  /* overflow: hidden; */
  overflow: auto;
}

.container {
  width: 100%;
  margin: 0 auto;
  height: auto;
  overflow: visible;
  padding-bottom: 10px;
}

header {
  text-align: center;
  margin-bottom: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #334155;
}

h1 {
  font-size: 24px;
  color: #38bdf8;
  margin-bottom: 5px;
}

h2 {
  font-size: 22px;
  color: #7dd3fc;
  margin: 14px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #334155;
}

h3 {
  font-size: 20px;
  color: #bae6fd;
  margin: 8px 0 6px;
}

.card {
  /* background-color: #0D2994; */
  background-color: #02064d;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #38bdf8;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 网格布局 */
.layout-grid {
  display: grid;
  grid-template-columns: 1.8fr 4fr 1.8fr;
  grid-template-rows: auto auto;
  gap: 8px;
  flex: 1;
}
/* 区域定位 */
.card-left {
  grid-column: 1/2;
  grid-row: 1/3;
  min-height: 700px; /* 保底高度，确保图片能完全显示 */
}
.card-middle-top {
  grid-column: 2 / 3; /* 中列 */
  grid-row: 1 / 2; /* 上行 */
}
.card-middle-bottom {
  grid-column: 2 / 3; /* 中列 */
  grid-row: 2 / 2; /* 下行 */
}
.card-right-top {
  grid-column: 3 / 4; /* 右列 */
  grid-row: 1 / 2; /* 上行 */
}
.card-right-bottom {
  grid-column: 3 / 4; /* 右列 */
  grid-row: 2 / 2; /* 下行 */
}

/* 表格滚动容器：核心解决底部隐藏问题 */
.table-scroll {
  flex: 1; /* 占满卡片剩余高度 */
  overflow-y: auto; /* 垂直超出时滚动，水平不滚动 */
  max-height: none;
}

.table-scroll::-webkit-scrollbar {
  width: 6px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background-color: #38bdf8;
  border-radius: 3px;
}

.stats-image-full {
  flex: 1; /* 占满左侧卡片剩余所有高度 */
  width: 100%;
  margin: 6px 0; /* 仅保留极小间距，几乎贴紧标题和分隔线 */
  padding: 0; /* 消除内边距 */
}

.stats-image {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  margin: 8px 0;
}

.task-image {
  max-width: 100%; /* 不超过容器宽度 */
  max-height: 250px; /* 限制最大高度，可根据需要调整 */
}

/* 左侧任务执行详情图片：放大至占满容器 */
.larger-task-image-left {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  max-width: none;
  max-height: none;
}

/* 右边图片专属样式*/
.larger-task-image {
  max-height: 400px; /* 大幅提高最大高度（原200px），图片放大 */
  max-width: 95%; /* 留少量边距，避免贴紧容器 */
  object-fit: contain; /* 保持图片比例，不拉伸 */
}

.task-stats {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}

.stat-item {
  flex: 1;
  min-width: 120px;
  background-color: #334155;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

.stat-item h4 {
  font-size: 14px;
  margin-bottom: 4px;
  color: #cbd5e1;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #38bdf8;
}

table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 12px;
}

th,
td {
  padding: 12px 12px;
  text-align: left;
  border-bottom: 1px solid #334155;
  color: white; /* 确保所有表格内容为白色 */
}

th {
  background-color: #334155;
  color: #7dd3fc;
  font-weight: 600;
  font-size: 16px;
  position: sticky; /* 固定表头 */
  top: 0;
  z-index: 10;
}

tr:hover {
  background-color: #2d3748;
}

.project-stats {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.project-item {
  flex: 1;
  min-width: 120px;
  background-color: #334155;
  border-radius: 4px;
  padding: 8px;
  text-align: center;
}

.project-title {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.project-value {
  font-size: 16px;
  font-weight: bold;
  color: #38bdf8;
}

.divider {
  height: 1px;
  background-color: #334155;
  margin: 10px 0;
}

.badge {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
  color: white; /* 确保徽章文字为白色 */
}

.badge-powder {
  background-color: #f59e0b;
}

.badge-liquid {
  background-color: #3b82f6;
}

.badge-water {
  background-color: #06b6d4;
}

/* 小屏幕强制适配（防止变形） */
@media (max-width: 1200px) {
  .layout-grid {
    grid-template-columns: 0.8fr 3fr 0.8fr; /* 微调比例，适配中等屏幕 */
  }
  table {
    font-size: 11px;
  }
  th,
  td {
    padding: 3px 5px;
  }
}
</style>
